import * as echarts from '../../ec-canvas/echarts.js';
import geoJson from '../../ec-canvas/china.js';

let chart = null;

function initChart(canvas, width, height, recordData,dpr) {
  // console.log(recordData)
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart); //容器初始化
  echarts.registerMap('china', geoJson); //地图数据注册

  const option = {
    tooltip: {
      trigger: 'item',
      showDelay: 0,
      transitionDuration: 0.2,
      formatter: function (params) {
          var value = (params.value + '').split('.');
          value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
          return params.name + ': ' + value;
      }
    },
    geo: [
      {
        // 地理坐标系组件
        map: "china",
        roam: false, // 可以缩放和平移
        aspectScale: 0.8, // 比例
        layoutCenter: ["50%", "38%"], // position位置
        layoutSize: 370, // 地图大小，保证了不超过 370x370 的区域
        label: {
          // 图形上的文本标签
          normal: {
            show: true,
            textStyle: {
              color: "rgba(0, 0, 0, 0.9)",
              fontSize: '8'
            }
          },
          emphasis: { // 高亮时样式
            color: "#333"
          }
        },
        itemStyle: {
          // 图形上的地图区域
          normal: {
            borderColor: "rgba(0,0,0,0.2)",
            areaColor: "#005dff"
          }
        }
      }
    ],
    toolbox: {
      show: false,
    },
    visualMap: {
      show:false,
      min: 0,
      max: 10000,
      text: ['High', 'Low'],
      realtime: false,
      calculable: false,
      inRange: {
        color: [  '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027']
      },
    },
    series: [
      {
        type: 'map',
        mapType: 'china',
        roam: false, // 鼠标是否可以缩放
        geoIndex: 0,
        label: {
          normal: {
            show: true
          },
          emphasis: {
            show: true
          }
        },
        data: [
          { name: '北京', value: 1000 },
          { name: '天津', value: 0 },
          { name: '上海', value: 0},
          { name: '重庆', value: 0},
          { name: '河北', value: 0 },
          { name: '河南', value: 0 },
          { name: '云南', value: 0 },
          { name: '辽宁', value: 0 },
          { name: '黑龙江', value: 1000 },
          { name: '湖南', value: 0 },
          { name: '安徽', value: 0 },
          { name: '山东', value: 0 },
          { name: '新疆', value: 0 },
          { name: '江苏', value: 0 },
          { name: '浙江', value: 0 },
          { name: '江西', value: 500 },
          { name: '湖北', value: 0 },
          { name: '广西', value: 0 },
          { name: '甘肃', value: 0 },
          { name: '山西', value: 0 },
          { name: '内蒙古', value: 0 },
          { name: '陕西', value: 0 },
          { name: '吉林', value: 100 },
          { name: '福建', value: 0 },
          { name: '贵州', value: 0 },
          { name: '广东', value: 0 },
          { name: '青海', value: 0 },
          { name: '西藏', value: 0 },
          { name: '四川', value: 0 },
          { name: '宁夏', value: 50 },
          { name: '海南', value: 0 },
          { name: '台湾', value: 0 },
          { name: '香港', value: 0 },
          { name: '澳门', value: 0 }
        ]
      }]
    };
    if(recordData != null && recordData.length > 0){
      option.series[0].data=JSON.parse(recordData)
      console.log(option.series[0].data)
    }
  chart.setOption(option);//返回初始化结果
  return chart;
}

Component({
  /**
   * 组件的属性列表
   */
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },
  properties: {
    item:{
      type:String,
      value:'',
    }
  },
  data: {
    ec: {
    },
    recordData:[
      { name: '北京', value: 1000 },
      { name: '天津', value: 0 },
      { name: '上海', value: 0},
      { name: '重庆', value: 0},
      { name: '河北', value: 0 },
      { name: '河南', value: 0 },
      { name: '云南', value: 0 },
      { name: '辽宁', value: 0 },
      { name: '黑龙江', value: 1000 },
      { name: '湖南', value: 0 },
      { name: '安徽', value: 0 },
      { name: '山东', value: 0 },
      { name: '新疆', value: 10000 },
      { name: '江苏', value: 0 },
      { name: '浙江', value: 0 },
      { name: '江西', value: 500 },
      { name: '湖北', value: 0 },
      { name: '广西', value: 0 },
      { name: '甘肃', value: 0 },
      { name: '山西', value: 0 },
      { name: '内蒙古', value: 0 },
      { name: '陕西', value: 0 },
      { name: '吉林', value: 100 },
      { name: '福建', value: 0 },
      { name: '贵州', value: 0 },
      { name: '广东', value: 0 },
      { name: '青海', value: 0 },
      { name: '西藏', value: 0 },
      { name: '四川', value: 0 },
      { name: '宁夏', value: 50 },
      { name: '海南', value: 0 },
      { name: '台湾', value: 0 },
      { name: '香港', value: 0 },
      { name: '澳门', value: 0 }
    ]
  },
  methods: {
    echartInit(e) {
      // console.log(e.target.dataset.record)
      // console.log(this.data.item)
      // let recordData=e.target.dataset.record;
      // console.log(recordData)
      let self = this
      // console.log(JSON.parse(self.data.item))
       initChart(e.detail.canvas, e.detail.width, e.detail.height,self.data.item);
    },
  }
})